﻿<!DOCTYPE html />
<html>
<head>
    <title>BB &ndash; Notes</title>
    <style type="text/css">
        .shadow
        {
            -moz-box-shadow: 5px 5px 9px 1px #ccc;
            -webkit-box-shadow: 5px 5px 9px 1px #ccc;
            box-shadow: 5px 5px 9px 1px #ccc;
        }
        
        .note
        {
            font-family: Verdana;
            background-color: Highlight;
            margin: 8 8 8 8;
            border-color: blanchedalmond;
            border-width: thin;
            display: inline-block;
            -moz-box-shadow: 5px 5px 9px 1px #ccc;
            -webkit-box-shadow: 5px 5px 9px 1px #ccc;
            box-shadow: 5px 5px 9px 1px #ccc;
        }
    </style>
</head>
<body>
<div class="note" style="display:block; color:White; background-color:Green; border-style:outset;" align="center">
<h2>
<span>BB Note Taking App
</span></h2></div>
<div id="divtotal">
    <div id="dvInput">
        <input id="txtNote" placeholder="write Ur notes..." style="display:block;" />
    </div>
    <div id="bodycontainer" style="">
    </div></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
        type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
        type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"
        type="text/javascript"></script>
    <script type="text/javascript">

        var app = {};

        app.NoteModel = Backbone.Model.extend({
            defaults: {
                title: '',
                value: ''
            }
        });

        app.NoteList = Backbone.Collection.extend({
            model: app.NoteModel,
            localStorage: new Store("BB-Notes")
        });

        app.notes = new app.NoteList();

        app.NoteView = Backbone.View.extend({
            el: $('#divtotal'),
            template: _.template("<div class='note'><div style='margin:6 6 6 6;'><%= value %></div></div>"),
            initialize: function () {
                this.input = this.$('#txtNote');
                app.notes.on('add', this.addNotes, this);
                app.notes.on('reset', this.addNotes, this);
                app.notes.fetch();
                //this.$el.html(this.template({ val: 'welcome' }) + this.template({ value: 'back' }))
            },
            events: {
                'keypress #txtNote': 'createNote'
            },
            createNote: function (e) {
                if (e.which !== 13 || !this.input.val().trim()) { // ENTER_KEY = 13
                    return;
                }
                app.notes.create(this.newNote());
                this.input.val('');
            },
            addNote: function (note) {
                var ee = this.$('#bodycontainer').html();
                this.$('#bodycontainer').html(ee + this.template(note.toJSON()));
                //var view = new app.NoteView({ model: note });
                //$('#bodycontainer').append(view.render().el);
            },
            addNotes: function () {
                this.$('#bodycontainer').html('');
                app.notes.each(this.addNote, this);
            },
            newNote: function () {
                return {
                    title: "Welcome",
                    value: this.input.val()
                }
            },
            newNote1: function () {
                return {
                    title: "Welcome",
                    value: "go"
                }
            }
        });

        var hello = new app.NoteView();
    </script>
</body>
</html>
